<template>
  <div class="pad-t-20">
    <el-form ref="userForm" :model="user" :rules="rules" label-position="right" label-width="120px" class="user-form">
      <el-form-item label="操作员姓名" prop="username">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-input v-model="user.username" :disabled="pageStatus!='create'"></el-input>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="登录手机号" prop="phone">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-input v-model="user.phone"></el-input>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="选择内部微客" prop="subRoleId" v-if="false">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-select v-model="user.memberId" placeholder="请选择" class="width-per-100">
              <el-option v-for="member in memberList" :key="member.memberId" :label="member.nickname" :value="member.memberId">
              </el-option>
            </el-select>
            <div>便于操作员直接使用第三方登录</div>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="角色" prop="subRoleId">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-select v-model="subRoleId" placeholder="请选择" class="width-per-100">
              <el-option v-for="role in roleList" :key="role.subRoleId" :label="role.name" :value="role.subRoleId"></el-option>
            </el-select>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="绑定第三方账号" v-if="false">
        <el-row :gutter="20">
          <el-col :span="7">
            <div class="bind-bar align-c pad-t-12 pad-b-12">
              <div class="flex v-align-c">
                <span class="logo-biz"></span>
                <span class="change-icon mar-l-20 mar-r-20"></span>
                <span class="logo-1"></span>
                <el-button :type="bindWechatClass" class="bind-btn mar-l-20" @click="showWechatCode">{{bindWechatText}}</el-button>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-radio-group v-model="user.status">
              <el-radio :label="1">正常</el-radio>
              <el-radio :label="0">禁用</el-radio>
            </el-radio-group>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: left;margin-left: 50px;">
      <el-button @click="$router.push({ path: '/subAccount/user/index' })">取消</el-button>
      <el-button type="primary" @click="saveData">确定</el-button>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .user-form{
    width: 90%;
    box-sizing: border-box;
    padding-left:50px;
    .bind-bar{
      background: #f2f2f2;
      border-radius: 5px;
      text-align: center;
      span, .bind-btn{
        display: inline-block;
        vertical-align: middle;
      }
      .change-icon{
        background:url('../../../../assets/images/bind-change.png') no-repeat;
        width: 33px;
        height: 33px;
        cursor: pointer;
      }
      .logo-biz{
        background:url('../../../../assets/images/bind-logo.png') no-repeat;
        width: 46px;
        height: 46px;
      }
      .logo-1{
        background:url('../../../../assets/images/bind-logo-1.png') no-repeat;
        width: 49px;
        height: 49px;
      }
      .logo-2{
        background:url('../../../../assets/images/bind-logo-2.png') no-repeat;
        width: 50px;
        height: 50px;
      }
      .logo-3{
        background:url('../../../../assets/images/bind-logo-3.png') no-repeat;
        width: 45px;
        height: 51px;
      }
    }
  }
</style>

<script>
  import { saveUser, getUserRoles } from '@/api/system/user'
  import { getRoleAll } from '@/api/system/role'
  import { getUser } from '@/api/system/user'
  import { getMemberList } from '@/api/user/enterprise'
  import { getNameByPath } from '@/utils/get-name-by-path' // 不要删除，根据URL获取文件名

  export default {
    name: getNameByPath(),
    data() {
      return {
        pageStatus: 'create',
        roleList: [],
        memberList: [],
        user: {
          status: 1
        },
        rules: {
          username: [
            { required: true, message: '操作员姓名不能为空', trigger: 'blur' }
          ],
          phone: [
            { required: true, message: '手机号不能为空', trigger: 'blur' }
          ]
        },
        data: [],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        subRoleId: '',
        bindWechatClass: 'primary',
        bindWechatText: '立即关联',
        wechatUrl: ''
      }
    },
    // 初始化页面
    created() {
      const queryParams = this.getCurrentPage().query
      if (queryParams.subUserId) {
        this.pageStatus = 'update'
        this.getSubUser(queryParams.subUserId)
      }
      this.initRoleAll()
      this.initMemberList()
      this.treeData()
    },
    methods: {
      // 树结构选择开始
      treeData() {
        this.data = [
          {
            id: 1,
            label: '任务众包',
            children: [
              {
                id: 11,
                label: '权限1'
              },
              {
                id: 12,
                label: '权限2'
              },
              {
                id: 13,
                label: '权限3'
              },
              {
                id: 14,
                label: '权限4'
              },
              {
                id: 15,
                label: '权限5'
              },
              {
                id: 16,
                label: '权限6'
              },
              {
                id: 17,
                label: '权限7'
              },
              {
                id: 18,
                label: '权限8'
              },
              {
                id: 19,
                label: '权限9'
              },
              {
                id: 20,
                label: '权限10'
              }
            ]
          },
          {
            id: 2,
            label: '内容分发',
            children: [
              {
                id: 21,
                label: '权限1'
              },
              {
                id: 22,
                label: '权限2'
              },
              {
                id: 23,
                label: '权限3'
              }
            ]
          },
          {
            id: 3,
            label: '商品分销',
            children: [
              {
                id: 31,
                label: '权限1'
              },
              {
                id: 32,
                label: '权限2'
              },
              {
                id: 33,
                label: '权限3'
              }
            ]
          }
        ]
      },
      getCheckedNodes() {
        console.log(this.$refs.tree.getCheckedNodes())
      },
      getCheckedKeys() {
        console.log(this.$refs.tree.getCheckedKeys())
      },
      setCheckedNodes() {
        this.$refs.tree.setCheckedNodes([{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 9,
          label: '三级 1-1-1'
        }])
      },
      setCheckedKeys() {
        this.$refs.tree.setCheckedKeys([3])
      },
      resetChecked() {
        this.$refs.tree.setCheckedKeys([])
      },
      // 树结构选择结束
      // 角色列表
      initRoleAll() {
        getRoleAll({ userCode: this.getUserCode() }).then(response => {
          this.roleList = response.data
        })
      },
      initMemberList() {
        this.memberList = []
        getMemberList(this.getEnterpriseId(), '').then(response => {
          if (response.isError) return
          this.memberList = response.data
        })
      },
      getUserRoles(subUserId) {
        getUserRoles(subUserId).then(response => {
          if (response.isError) return
          if (response.data.length > 0) {
            this.subRoleId = response.data[0].subRoleId
          }
        })
      },
      getSubUser(subUserId) {
        getUser(subUserId).then(response => {
          if (response.isError) return
          this.user = response.data
          this.bindWechatClass = this.user.unionId ? 'danger' : 'primary'
          this.bindWechatText = this.user.unionId ? '解除关联' : '立即关联'
          this.getUserRoles(this.user.subUserId)
        })
      },
      // 保存用户信息
      saveData() {
        this.$refs['userForm'].validate((valid) => {
          if (valid) {
            this.user.userCode = this.getUserCode()
            this.user.subRoleIds = []
            if (this.subRoleId) {
              this.user.subRoleIds.push(this.subRoleId)
            }
            saveUser(this.user).then((response) => {
              if (response.isError) {
                return
              }
              this.$message({
                type: 'success',
                message: '保存成功!'
              })
              this.$router.push({ path: '/subAccount/user/index' })
            })
          }
        })
      },
      showWechatCode() {
        const redirectUrl = encodeURIComponent('https://e.joinsun.vip/api/system/user/wechat/auth')
        const stat = 'wx597837043c592bdc:' + (this.user.unionId ? 'unbind:' : 'bind:') + this.user.subUserId
        this.wechatUrl = 'https://open.weixin.qq.com/connect/qrconnect?appid=wx597837043c592bdc&redirect_uri=' + redirectUrl + '&response_type=code&scope=snsapi_login&state=' + stat + '#wechat_redirect'
        window.open(this.wechatUrl)
      }
    }
  }
</script>
